<!-- 车辆管理 -->
<template>
  <div class="dashboard-container driver customer-list-box">
    <el-card shadow="never" style="margin: 20px">
      <el-form
        inline
        style="height: 105px"
        :model="driverForm"
        :rules="driverRules"
        ref="driverFormRef"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="司机账号："
              prop="account"
              style="margin-left: 20px; font-weight: normal"
            >
              <el-input
                style="width: 226px"
                placeholder="请输入司机账号"
                v-model="driverForm.account"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="司机姓名：" style="margin-left: 20px">
              <el-input
                style="width: 226px"
                placeholder="请输入司机姓名"
                v-model="driverForm.name"
                clearable
              ></el-input> </el-form-item
          ></el-col>

          <el-col :span="8">
            <el-form-item label="司机手机号：" style="margin-left: 20px">
              <el-input
                style="width: 226px"
                placeholder="请输入司机手机号"
                v-model="driverForm.mobile"
                clearable
              ></el-input> </el-form-item
          ></el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="所属机构：" style="margin-left: 20px">
              <treeselect
                v-model="driverForm.agentId"
                :options="agencyOptions"
                :normalizer="normalizer"
                :searchable="true"
                style="width: 226px"
                placeholder="请选择所属机构"
                no-options-text="暂无数据"
                no-results-text="暂无数据"
                @select="selectStartAgency"
                @open="open"
                @close="close"
              />
              <img
                ref="arrows"
                src="@/assets/pullDown.png"
                style="
                  position: absolute;
                  width: 18px;
                  height: 18px;
                  right: 9px;
                  top: 12px;
                  cursor: pointer;
                  pointer-events: none;
                  transition-duration: 0.3s;
                "
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item style="margin-left: 20px">
              <el-button
                style="
                  width: 90px;
                  background-color: #e15536;
                  color: #fff;
                  border: none;
                "
                @click="search"
                class="redBtn"
              >
                搜索
              </el-button>
              <el-button
                style="width: 90px"
                @click="clearForm"
                class="commonBtn"
                type="danger"
                plain
                >重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 表格 -->
    <el-card shadow="never" style="margin: 20px; padding: 5px">
      <el-table
        size="mini"
        stripe
        class="el-table"
        :data="tableData"
        :row-style="{ height: '20px' }"
      >
        <el-table-column
          height="100px"
          label="序号"
          width="100px"
          type="index"
          :index="indexMethod"
        >
        </el-table-column>
        <el-table-column
          label="司机账号"
          prop="account"
          width="200px"
        ></el-table-column>
        <el-table-column
          label="司机姓名"
          prop="name"
          width="200px"
        ></el-table-column>
        <el-table-column
          label="司机电话"
          prop="mobile"
          width="200px"
        ></el-table-column>
        <el-table-column
          label="关联车辆"
          prop="truck.licensePlate"
          width="200px"
        ></el-table-column>
        <el-table-column
          label="所属机构"
          prop="agency.name"
          width="200px"
        ></el-table-column>
        <el-table-column
          label="工作状态"
          prop="workStatus"
          width="250px"
        ></el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          width="150px"
          align="center"
        >
          <template #default="{ row }">
            <el-button type="text" @click="goDriverDetail(row)">
              查看
            </el-button>
            <span style="font-size: 16px; color: #dcdfe6; margin: 0 5px">
              |
            </span>
            <el-button type="text" @click="carConfig(row)">
              配置车辆
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-pagination
        class="pagination"
        layout="total, sizes, prev, pager, next, jumper"
        :total="+counts"
        @current-change="handlePage"
        @size-change="handlePageSize"
        :current-page="params.page"
        :page-size="params.pageSize"
      ></el-pagination>
    </el-card>

    <!-- 弹窗1 -->
    <el-dialog
      class="dialog1"
      title="车辆配置"
      :visible.sync="showCarConfig"
      @close="closeCarConfig()"
      width="400px"
    >
      <span>配置车辆需满足以下条件：</span>
      <br /><br />
      <div>
        <span style="margin-right: 70px"
          ><span class="num">1</span> 司机信息已完善</span
        >
        <span><span class="num">2</span> 司机已设置排班</span>
      </div>
      <br />
      <span style="display: inline-block; margin-bottom: 20px"
        ><span class="num">3</span> 司机绑定车辆未在启用状态</span
      >
      <el-row type="flex" justify="end">
        <el-button
          size="mini"
          @click="closeCarConfig()"
          class="commonBtn"
          style="margin-right: 5px"
          >取消</el-button
        >
        <el-button
          style="background-color: #e15536; color: #fff; border-color: #e15536"
          size="mini"
          type="primary"
          @click="carConfigConfirm"
          class="redBtn"
        >
          确定
        </el-button>
      </el-row>
    </el-dialog>

    <!-- 弹窗2 -->
    <el-dialog
      title="配置车辆"
      :visible.sync="showCarConfig2"
      @close="closeCarConfig2()"
      width="600px"
    >
      <el-card
        style="background-color: rgb(251, 250, 250); margin-bottom: 20px"
        shadow="never"
      >
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="margin-bottom: 15px; margin-left: 30px"
        >
          <el-col
            >司机编号：<span class="color818693">{{ row.userId }}</span></el-col
          >
          <el-col
            >司机名称：<span class="color818693">{{ row.name }}</span></el-col
          >
        </el-row>

        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="margin-top: 15px; margin-left: 30px"
        >
          <el-col
            >司机电话：<span class="color818693">{{ row.mobile }}</span></el-col
          >
          <el-col
            >所属机构：<span class="color818693">{{
              row.agency.name
            }}</span></el-col
          >
        </el-row>
      </el-card>

      <el-form>
        <el-form-item label="配置车辆：" label-width="100px">
          <el-select
            style="width: 50%"
            v-model="currentCar"
            @change="selectChange"
          >
            <el-option
              v-for="item in carLicense"
              :key="item.id"
              :label="item.licensePlate"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <el-table :data="carTable" style="margin-bottom: 20px">
        <el-table-column
          label="车牌号"
          prop="truck.licensePlate"
        ></el-table-column>
        <el-table-column label="车辆状态" prop="truck.workStatus">
          <template #default="{ row }">
            <span v-if="!row.truck"></span>
            <span v-else-if="row.truck.workStatus === 0">
              <span class="dot"></span>
              <span>停用</span>
            </span>
            <span v-else>
              <span class="dot dotGreen"></span>
              <span>启用</span>
            </span>
            <!-- {{ row.truck.workStatus === 0 ? '停用' : '启用' }} -->
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <span v-if="row.truck">
              <el-button type="text" @click="checkCar(row)">查看</el-button>
              <span style="font-size: 16px; color: #dcdfe6; margin: 0 5px">
                |
              </span>
              <el-button
                type="text"
                style="color: #f56c6c"
                @click="popConfirm(row.id)"
                >删除</el-button
              >
            </span>
          </template>
        </el-table-column>
      </el-table>

      <el-row>
        <el-row type="flex" justify="center" align="middle">
          <el-col
            style="width: 200px; display: flex; justify-content: space-between"
          >
            <el-button
              type="primary"
              style="
                width: 90px;
                background-color: #e15536;
                color: #fff;
                border: none;
              "
              @click="btnOK"
              class="redBtn"
            >
              确认
            </el-button>
            <el-button
              style="width: 90px"
              @click="closeCarConfig2()"
              class="commonBtn"
            >
              取消
            </el-button>
          </el-col>
        </el-row>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {
  driverArrangeCar,
  driverList,
  getTruckListInDriver,
  truckDel
} from '@/api/transit'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { agencyList } from '@/api/institutions'

export default {
  components: { Treeselect },
  name: 'Courses',
  data() {
    return {
      // 表单数据对象
      driverForm: {},

      // 表单校验规则对象
      driverRules: {},

      // 表格数据
      tableData: [],

      // 获取表格数据的请求参数
      params: {
        account: '', // 司机编号
        agentId: '', // 机构ID
        name: '', // 司机名称
        page: 1, // 页码
        pageSize: 10, // 页尺寸
        phone: '', // 电话
        workStatus: '' // 工作状态
      },

      // 数据总条数
      counts: 0,

      operationalSearchFormData: {
        startAgencyId: null
      },
      agencyOptions: [],
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },

      // 弹窗显隐
      showCarConfig: false,

      // 弹窗2显隐
      showCarConfig2: false,

      row: {
        userId: '', // 司机编号
        name: '', // 司机名称
        mobile: '', // 司机电话
        agency: {
          name: '' // 所属机构
        }
      },

      // 配置车辆 表格
      carTable: [],

      // 下拉框 车牌列表
      carLicense: [],

      // 当前车辆车牌
      currentCar: '',

      // 下拉列表中的全部车辆信息
      carList: [],

      // 司机安排车辆
      data: {
        driverIds: [], // 司机id列表
        truckId: '' // 车辆id
      },

      // 切换时保存当前车辆id
      nowId: ''
    }
  },

  created() {
    this.getAgencyList()
    this.getDriverList()
    this.getTruckListInDriver()
  },

  methods: {
    // 获取 司机分页数据
    async getDriverList() {
      const { data } = await driverList(this.params)
      // console.log(data)
      // console.log(data.counts)
      this.counts = data.counts
      this.tableData = data.items
      // console.log(this.tableData)
    },

    // 获取司机配置车辆弹出框中车辆下拉的数据（已停用并且绑定司机数少于两个）
    async getTruckListInDriver() {
      const { data } = await getTruckListInDriver()
      // console.log('data', data)
      this.carLicense = data
      this.carList = data
      // console.log(this.carLicense)
    },

    // 换页
    handlePage(page) {
      this.params.page = page
      this.getDriverList()
    },

    // 变更每页显示条数
    handlePageSize(pageSize) {
      this.params.pageSize = pageSize
      this.getDriverList()
    },

    // 表格序号
    indexMethod(index) {
      return index + 1 + (this.params.page - 1) * this.params.pageSize
    },

    // 树形
    selectStartAgency(val) {
      this.driverForm.agentId = val.id
    },
    open() {
      this.$refs.arrows.style.transform = 'rotate(-180deg)'
    },
    close() {
      this.$refs.arrows.style.transform = 'rotate(0deg)'
    },
    async getAgencyList() {
      const { data: res } = await agencyList()
      // 获取数据给options
      this.agencyOptions = JSON.parse(res)
    },
    getRow(row) {
      console.log(row)
    },

    // 重置按钮
    clearForm() {
      this.driverForm = {}
      // this.params = {
      //   account: '', // 司机编号
      //   agentId: '', // 机构ID
      //   name: '', // 司机名称
      //   page: 1, // 页码
      //   pageSize: 10, // 页尺寸
      //   phone: '', // 电话
      //   workStatus: '' // 工作状态
      // }
      this.$$nextTick(() => {
        this.getDriverList()
      })
      console.log(this.counts)
      console.log(this.tableData)
    },

    // 搜索按钮
    search() {
      console.log(this.driverForm)
      this.params = { ...this.driverForm, page: 1, pageSize: 10 }
      this.getDriverList()
      // this.clearForm()
    },

    // 点击 配置车辆
    carConfig(row) {
      this.showCarConfig = true
      // console.log(row)
      this.row = row
      this.carTable = [row]
      console.log(this.carTable)
      // console.log('row.truck', row.truck)
      if (row.truck) {
        // console.log(row.truck.licensePlate)
        this.currentCar = row.truck.licensePlate
      }
      // console.log(this.row)
      // console.log('carTable', this.carTable)
      // console.log(this.currentCar)
    },

    // 关闭 弹窗1
    closeCarConfig() {
      this.showCarConfig = false
    },

    // 点击 弹窗1确定按钮
    carConfigConfirm() {
      this.closeCarConfig()
      this.showCarConfig2 = true
    },

    // 关闭 弹窗2
    closeCarConfig2() {
      this.showCarConfig2 = false
      this.currentCar = ''
      this.carTable = []
    },

    // 点击查看按钮 跳转至 司机详情driver-detail
    goDriverDetail(row) {
      // console.log(row.truck.id)
      // console.log(row.userId)
      this.$router.push({
        path: '/transit/driver-detail',
        query: {
          id: row.userId,
          formUrlName: '司机管理'
        }
      })
    },

    // 删除按钮
    async popConfirm(id) {
      // console.log(id)
      // await truckDel(id)
      this.currentCar = ''
      this.carTable = []
    },

    // 下拉框的选中车牌发生改变
    selectChange(now) {
      // 当前选中的车辆id
      // console.log('now', now)
      // console.log(this.carTable)
      // 获取 全部车辆数据
      // console.log(data)
      // 保存当前车辆id
      this.nowId = now
      // 匹配 id一致的车
      const res = this.carList.filter(ele => ele.id === now)
      // id一致的车 的车牌
      console.log('切换后的车牌', res[0].licensePlate)
      // 赋值
      this.carTable[0].truck.licensePlate = res[0].licensePlate
    },

    // 跳转 车辆详情vehicle-detail
    checkCar(row) {
      console.log(row.truck.id) // 当前车辆id
      console.log(row.truck.licensePlate) // 当前车牌
      const res = this.carList.filter(
        // 通过匹配一致的车牌找到id
        ele => ele.licensePlate === row.truck.licensePlate
      )
      console.log(res)
      if (res[0]) {
        // console.log(111)
        this.$router.push({
          path: '/transit/vehicle-detail',
          query: {
            id: res[0].id,
            formUrlName: '司机管理'
          }
        })
      } else {
        // console.log(222)
        this.$router.push({
          path: '/transit/vehicle-detail',
          query: {
            id: row.truck.id,
            formUrlName: '司机管理'
          }
        })
      }
    },

    // 安排车辆（司机）
    async btnOK() {
      console.log([this.row.userId]) // 司机id
      this.data.driverIds.push(this.row.userId)
      // console.log(this.row.userId * 1)
      // const driverId = Number(this.row.userId)
      console.log(this.row.truck.id) // 车辆id
      // console.log('nowId', this.nowId)
      // 切换后的车辆id 若不为空 说明id改变过
      if (this.nowId) {
        this.data.truckId = this.nowId
      } else {
        this.data.truckId = this.row.truck.id
      }
      // console.log(this.carList[1])
      // const rs = this.carList.filter((ele) => ele.id === this.row.truck.id)
      // console.log(rs[0].licensePlate)
      // console.log(this.data)
      const res = await driverArrangeCar(this.data)
      console.log(res)

      // 弹框
      if (res.code === 200) {
        this.$message.success(res.msg)
      } else {
        this.$message.error(res.msg)
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .num {
  text-align: center;
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid rgb(235, 238, 245);
  background: rgb(250, 252, 255);
  border-radius: 50%;
  margin-right: 5px;
}

::v-deep .el-dialog__body {
  padding: 10px 30px 30px !important;
}

::v-deep .el-dialog__header {
  background-color: transparent;
}

::v-deep .redBtn:hover {
  border-color: rgb(255, 171, 152) !important;
  background-color: rgb(255, 171, 152) !important;
}

::v-deep .commonBtn:hover {
  background-color: rgb(255, 238, 235);
  border-color: rgb(243, 145, 124);
  color: rgb(225, 85, 54);
}

.dot {
  display: inline-block;
  margin-right: 3px;
  margin-bottom: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #e15536;
}

.dotGreen {
  background-color: #1dc779;
}

::v-deep .color818693 {
  color: #818693;
}

::v-deep .el-form-item__label {
  font-weight: normal;
}

.alert {
  margin: 10px 0px;
}
// 分页器
.pagination {
  margin: 20px 0 0px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px !important;
  color: #20232a !important;
  .el-select .el-input.is-focus .el-input__inner {
    border-color: #e15536 !important;
  }
  .el-pagination__total {
    font-size: 14px !important;
    color: #20232a !important;
    margin-right: 35px !important;
  }
  .el-pagination__sizes {
    margin: 0 28px 0 0 !important;
  }
  .el-pagination__sizes .el-input .el-input__inner {
    font-size: 14px !important;
    color: #20232a !important;
  }
  .el-pagination__editor.el-input {
    width: 66px !important;
  }
  .el-pagination__editor {
    padding: 0 7px;
  }
  .el-pagination__sizes .el-select .el-input {
    width: 102px !important;
    margin: 0;
    // padding: 0 28px 0 35px !important;
  }
  .el-pagination__jump {
    font-size: 14px !important;
    color: #20232a !important;
    margin-left: 28px !important;
    .el-input__inner {
      color: #20232a !important;
    }
  }
  .el-pagination__sizes .el-input .el-input__inner:hover {
    border-color: #e15536;
  }
  .el-pagination button:hover {
    color: #e15536;
  }
  .el-pager {
    li {
      font-size: 14px !important;
      &:hover {
        color: #e15536;
      }
    }
    li.active {
      color: #e15536;
    }
  }
}
// 下拉框
::v-deep .el-select {
  width: 100%;
}

::v-deep .el-card {
  overflow: initial;
}

::v-deep .vue-treeselect__menu-container {
  z-index: 9999 !important;
}
</style>
